<template>
    <el-drawer
            :visible.sync="dialogVisible"
            :size="width"
            :wrapperClosable="false"
            :withHeader="false"
            :modal="false"
            :style="body?'':'position:absolute'"
            class="custom-drawer"
            :append-to-body="body">
        <div class="topbg" >
            <img id="bgimg" :src='topimg' alt="">
        </div>
        <el-container class="module xl-container is-vertical card-watermark">
            <el-header class="xl-bar xl-bar-nav default"  v-if="$slots.header">
                <slot  name="header" :data="data"></slot>
            </el-header>
            <el-main class="xl-main" style="overflow-x: hidden;padding: 5px;" >
                <slot :data="data" ></slot>
            </el-main>
        </el-container>
    </el-drawer>
</template>

<script>

export default {
  name: 'cu-drawer',
  components: {  },
  data() {
    return {
      topimg: require('@/assets/blue-white/top-bg.png'),
      dialogVisible: false,
      data: null
    }
  },
  props: {
    width: {
      type: String,
      default: '40%'
    },
    body: true,
  },
  watch: {
    params: {
      handler(nv, o) {
        if (nv.data) {

        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    close() {
      if (this.$el.querySelector('.xl-bar-nav')) {
        this.$el.querySelector('.xl-bar-nav').classList.remove('slow-title')
      }
      this.dialogVisible = false;
    },
    show(data) {

      this.data = data;
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.$el.querySelector('.xl-bar-nav')) {
          this.$el.querySelector('.xl-bar-nav').classList.add('slow-title')
        }
      })
    },
    backClose() {
      if (this.$el.querySelector('.xl-bar-nav')) {
        this.$el.querySelector('.xl-bar-nav').classList.remove('slow-title')
      }
      this.$emit('close');
      this.data=null;
      this.dialogVisible = false;
    }
  },
  computed: {
    params() {
      return this.$store.state.home.params || {};
    }
  },
  mounted() {
    this.$nextTick(() => {

    });
  },
}
</script>

<style scoped>
    .custom-drawer /deep/ .el-drawer__body{
        position: relative;
        z-index: 99;
    }
    .dialog-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
    }
</style>
